<template>
  <div id="live">
    <div class="center">
      <div class="list">
        <div class="toptitle">
          <b>直播公开课</b>
        </div>
        <ul>
          <li>
              <div class="listimg">
                  <img src="../../../../public/ycbimg/zb1.png" alt="">
              </div>
              <div class="listcontent">
                  <p><b>商业插画</b></p>
                  <div><b>戳戳</b></div>
                  <span>直播时间:1月25日</span>
              </div>
          </li>
          <li>
              <div class="listimg">
                  <img src="../../../../public/ycbimg/zb2.png" alt="">
              </div>
              <div class="listcontent">
                  <p><b>中国画·0基础入门</b></p>
                  <div><b>苏月白</b></div>
                  <span>直播时间:5月21日</span>
              </div>
          </li>
          <li>
              <div class="listimg">
                  <img src="../../../../public/ycbimg/zb3.png" alt="">
              </div>
              <div class="listcontent">
                  <p><b>产品经理5天训练营</b></p>
                  <div><b>梁宁</b></div>
                  <span>直播时间:明天</span>
              </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
#live {
  width: 100%;
  border-bottom: .01rem solid #fafafa;
}
.center {
  width: 3.45rem;
  margin: auto;
}
.list{
    width: 100%;
}
.toptitle {
  width: 100%;
  height: 0.5rem;
  line-height: 0.5rem;
  font-size: 0.16rem;
}
.list ul{
    width: 100%;
}
.list ul li{
    width: 100%;
    height: .92rem;
    margin-bottom: .3rem;
}
.listimg{
    width: .74rem;
    height: .92rem;
    margin-right: .2rem;
    float: left;

}
.listimg img{
    width: 100%;
    height: 100%;
}
.listcontent{
    width: 2.51rem;
    height: 100%;
    float: left;
}
.listcontent p{
    width: 100%;
    height: 30%;
    font-size: .16rem;
    line-height: .3rem;
}
.listcontent div{
    width: 100%;
    height: 30%;
    font-size: .14rem;
    line-height: .3rem;
}
.listcontent span{
    width: 100%;
    height: 30%;
    font-size: .12rem;
    line-height: .3rem;
    display: block;
}
</style>
